<template>
  <div id="edit-user-name-page" class="edit-uesr-name-box">
    <mobileNavbar :name="$t('message.mobileRouter.changeNick')" @back="handleBack" ref="navbar"></mobileNavbar>
    <div class="origin-name-box">{{$t('message.mobile.originAccount')}}：{{userInfo.accountName}}</div>
    <div class="name-tips">{{$t('message.mobile.ediAccountTips')}}</div>
    <div class="name-input-box">
      <el-input v-model="newUserName" :placeholder="$t('message.placeholder.pleaseNewName')" maxlength="16" @keyup.enter="handleClick"></el-input>
    </div>
    <div class="button-box" :class="[!newUserName && 'button-disable']" @click="handleClick">
      {{$t('message.buttons.submit')}}
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch ,
  onMounted,
  getCurrentInstance
} from 'vue' 
import type {ComponentInternalInstance} from 'vue'
const instance: any = getCurrentInstance() as ComponentInternalInstance;
const proxy: any = instance.proxy as any; // 访问 proxy 属性
import { useHookI18n } from '@/hooks/i18n'
const { locale,$t } = useHookI18n()
import { useRouter } from "vue-router"
const router = useRouter();
import mobileNavbar from './mobileNavbar.vue';
import { getStore,removeItemAll } from '@/utils/store.js'
import { updateAccountHead } from "@/api/user"
const emit = defineEmits([""])
const props = defineProps({

})

const newUserName = ref("")
const userInfo = ref({})
const navbar = ref()
onMounted(()=>[
  userInfo.value = getStore({name:'userInfo'}) || {tenant:{}}
])

function handleClick(){
  if(!newUserName.value) return
  if(newUserName.value != userInfo.value.accountName) {
    updateAccountHead('accountName', newUserName.value).then(res =>{
      if(res.data && res.data.code == 0) {
        proxy.$mobileMessage({
          type:'success',
          text:$t('message.message.editSuccess')
        })
        removeItemAll(['lib','allType','iconList','isMobile'])
        router.push('/mobile/login')
      }
    })
  }else{
    navbar.value.back()
  }
}

function handleBack(val){
  router.push(val)
}

</script>
<style lang="scss" scoped>
.edit-uesr-name-box{
  .origin-name-box{
    margin-top: 1rem;
    padding: 0rem .9375rem;
    @include SourceHanSansCN-Medium;
    font-size: 1rem;
    color: #363B4C;
  }
  .name-tips{
    padding: 0rem .9375rem;
    @include SourceHanSansCN-Regular;
    font-size: .875rem;
    color: #6f7588;
    margin-top: .5rem;
    margin-bottom:1.375rem;
  }
  .name-input-box{
    margin: 0rem .9375rem;
    height: 3rem;
    background: #F5F6F7;
    border-radius: .375rem;
    opacity: 1;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    ::v-deep(.el-input){
      .el-input__wrapper{
        border:none !important;
        background-color: transparent !important;
        box-shadow: none !important;
        &::-webkit-input-placeholder{
          font-size: .875rem;
          color: #6f7588;
          @include SourceHanSansCN-Regular;
        }
      }
    }
  }
  .button-box{
    margin: 0rem .9375rem;
    height: 3rem;
    background: #1E6FFF;
    border-radius: .375rem;
    overflow: hidden;
    font-size: .875rem;
    @include SourceHanSansCN-Medium;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: .0625rem;
  }
  .button-disable{
    background: #8EB7FF;
  }
}
</style>